<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配 移动设备 -->
    <title>根据数据生成柱形图</title>
    <style>
        /* 清除默认标签默认样式 */
        * {
            margin: 0;
            padding: 0;
        }


        .大盒子 {
            display: flex; /* flex布局 */
            width: 700px; /* 盒子宽高 */
            height: 300px;

            border-left: 1px solid pink; /* 左边框线 */
            border-bottom: 1px solid pink; /* 下边框线 */

            margin: 50px auto; /* 版心居中 */

            justify-content: space-around; /* 主轴对齐方式: 弹性盒子,两侧都有空白 */
            align-items: flex-end; /* 侧轴对齐方式, 效果柱形图都在底部 */
            
            text-align: center; /* 文字, 水平居中 */
        }

        .大盒子 .柱形图 {
            display: flex; /* flex布局 */
            width: 50px; /* 盒子宽, 高在标签里设置 */
            background-color: pink; /* 盒子背景色 */

            flex-direction: column; /* 修改主轴方向 垂直方向；侧轴自动变换到水平方向 */
            justify-content: space-between;  /* 主轴在垂直方向，视觉效果 文字之间有间距,但上下没有空白 */
        }

        .大盒子 .柱形图 span {
            margin-top: -20px; /* 上外边距, 这里负值 效果是文字在外面 */
        }

        .大盒子 .柱形图 h4 {
            margin-bottom: -35px; /* 下外边距, 这里负值 效果是文字在外面 */
            margin-left: -10px; /* 左外边距, 这里负值 效果是文字左移 */

            width: 70px; /* 盒子宽度, 这里效果是文字可以在一行 注意宽度合适 */
        }
    </style>
</head>

<body>
<p>
柱形图思路: <br>
大盒子 套4个小盒子(柱形图), 大盒子有边框线 模拟XY轴线 <br>
小盒子(柱形图) flex布局, 并排
</p>
<!--这里的是演示 柱形图是怎么作出来的, 具体我们这里要使用JS来实现 相同的效果-->
<!--
<div class="大盒子">
    <div class="柱形图" style="height: 123px;">  标签里输入柱形图的高,代表业绩
        <span>123</span>
        <h4>第1季度</h4>
    </div>
    <div class="柱形图" style="height: 156px;">
        <span>156</span>
        <h4>第2季度</h4>
    </div>
    <div class="柱形图" style="height: 120px;">
        <span>120</span>
        <h4>第3季度</h4>
    </div>
    <div class="柱形图" style="height: 210px;">
        <span>210</span>
        <h4>第4季度</h4>
    </div>
</div>
-->


<!--js代码实现-->
<!--
需求： 用户输入四个季度的数据，可以生成柱形图
分析：
①：需要输入4次，所以可以把4个数据放到一个数组里面
利用循环，弹出4次框，同时存到数组里面
②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
div里面包含显示的数字和 第n季
-->
<script>
    // 先定义一个空数组
    let 数组 = []

    // 在弹窗里依次输入业绩, 并且依次保存到数组里
    for (let i = 1; i <= 4; i++) {
        数组.push(+prompt(`请输入第 ${i} 季度的业绩`))
    }

    // 下面是柱形图 4个盒子的代码实现
    // 大盒子里4个小盒子, 小盒子循环实现
    document.write('<div class="大盒子">') // 大盒子 开头标签

    //这里循环是中间4个 柱形图 盒子, 小div标签
    for (let p = 0; p < 数组.length; p++) {
        // 注意这里的引号要 反引号
        document.write(`
                <div class="柱形图" style="height: ${数组[p]}px;"> <!-- 数组元素的值就是业绩, 业绩多少当作盒子的高. 注意:这里的细节px前面不要有空格 因为这里是CSS代码-->
                    <span>${数组[p]}</span> <!-- 读取数组里的值 -->
                    <h4>第${p + 1}季度</h4>
                </div>
            `)
    }

    document.write('</div>') // 大盒子 尾部标签
</script>
</body>
</html>